// 综合续班率进度
import React, {useEffect, useState, useReducer} from 'react';
import {Select, Empty} from 'antd';
import {convertSearcherParams} from '~/page/FineBi/utils/convert';
import {
    querySelectOptions,
} from '~/service/refundReport';
import {searchConfig} from '../../config';
import Config from './config';


const key = 'day_sequence';
const selectUnitId = 'Renewal_Overview_partTwo_Total_Renewal_Degree_select';
const reducer = (state, action) => ({...state, ...action});

const ZongheZubanLv = props => {
    const {dId, unitId, dimensionAndValues, fetchData} = props;
    const [state, dispatch] = useReducer(reducer, {});
    const {
        options,
        curSelect,
        newDimensionAndValues = dimensionAndValues
    } = state;

    useEffect(() => {
        const permissions = searchConfig.map(item => {
            /* eslint-disable */
            const filterItems = dimensionAndValues.filter(dimensionItem => dimensionItem.dimensionName === item.key)?.[0]?.value || [];

            return (
                {
                    dimensionId: `${item.unitId}_${item.key}`,
                    dimensionName: item.key,
                    filterItems
                }
            );
        });

        const params = {
            // pager,
            dimensionId: `${selectUnitId}_${key}`,
            dimensionName: key,
            // searchKey,
            permissions,
            unitId: selectUnitId
        };

        querySelectOptions(params)
            .then(res => {
                const {data, pager} = res;
                const curSelect = data?.[0];
                const addDimension = convertSearcherParams({[key]: curSelect});
                const newDimension = [...dimensionAndValues, ...addDimension];
                dispatch({
                    options: data || [],
                    curSelect,
                    newDimensionAndValues: newDimension
                });
            });
    }, [dimensionAndValues]);


    const handleChange = value => {
        const updateDimension = convertSearcherParams({[key]: value});
        const newDimension = [...dimensionAndValues, ...updateDimension];
        dispatch({
            ...state,
            curSelect: value,
            newDimensionAndValues: newDimension
        });

    };

    return (
        <div>
            {options ? (
                <Config
                    dId={dId}
                    unitId={unitId}
                    dimensionAndValues={newDimensionAndValues}
                    fetchData={fetchData}
                >
                    <div style={{marginBottom: 20}}>
                        <span>续班第n天: </span>
                        <Select
                            onChange={handleChange}
                            value={curSelect}
                            style={{width: 200}}
                            getPopupContainer={ele => ele.parentElement}
                        >
                            {options.map(item => (
                                <Select.Option key={item} label={item}>
                                    {item}
                                </Select.Option>
                            ))}
                        </Select>
                    </div>
                </Config>
            ) : (
                <div className="echart-not-data default-height"><Empty /></div>
            )}
        </div>
    );
};

export default ZongheZubanLv;
